<template>
  <div class="myBanner center">
    <!-- 首页轮播图模块 -->
    <!-- <my-input v-model="val"></my-input>
    {{val}}
    <input type="text" v-model="val" name="" id=""> -->
    <!-- 首页轮播图模块 -->
    <div class="myBanners">
      <!-- <carousel
        :autoplay="true"
        :duration="3000"
        :initial="0"
        :hasDot="true"
        :hasDirector="true"
        :left="left"
      >
        <car-item v-for="(item, index) in banner" :key="index">
          <img :src="item.imgUrl" alt="" />
        </car-item>
      </carousel> -->
      <div
        class="swiper"
        @mouseenter="mouseenterChange(true)"
        @mouseleave="mouseenterChange(false)"
      >
        <transition-group name="opcatiy">
          <img
            :src="item.imgUrl"
            v-for="(item, index) in banner"
            :key="index"
            alt=""
            v-show="imgCurrentIndex == index"
          />
        </transition-group>
        <transition-group name="opcatiy">
          <span
            class="iconfont icon-xiangzuojiantou left"
            @click="currentIndexHandle(-1)"
            v-if="hasDirector"
          ></span>
          <span
            class="right iconfont icon-xiangyoujiantou"
            @click="currentIndexHandle(1)"
            v-if="hasDirector"
          ></span>
        </transition-group>
        <ul class="ul">
          <li
            v-for="(item, index) in banner.length"
            :key="item"
            :class="index == imgCurrentIndex ? 'active' : ''"
            @click="imgCurrentIndex = index"
          ></li>
        </ul>
      </div>
      <!-- 左侧一级分类 -->
      <div @mouseleave="flag = false">
        <ul class="gul">
          <li
            v-for="(item, index) in cateData"
            :key="index"
            @mouseenter="cateHandle(item)"
          >
            {{ item.name }}
            <span
              v-for="(items, index) in item.children.slice(0, 2)"
              :key="index"
              >{{ items.name }}</span
            >
          </li>
        </ul>
        <!-- 右侧二级分类 -->
        <div class="listContent" v-show="flag">
          <div style="margin-bottom: 20px">
            <span class="title">{{ title }}推荐</span> &nbsp;&nbsp;
            <span>根据您的购买记录或浏览记录推荐</span>
          </div>
          <div class="goods_content">
            <router-link
              :to="'/product/' + item.id"
              class="goods_item"
              v-for="item in listData"
              :key="item.id"
            >
              <my-shop-car
                :img="item.picture"
                :title="item.name"
                :desc="item.desc"
                :price="item.price"
              ></my-shop-car>
            </router-link>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {
  ref,
  reactive,
  toRefs,
  computed,
  onMounted,
  onBeforeUnmount,
} from "vue";
import { useRouter, useRoute } from "vue-router";
import { useStore } from "vuex";
import { getBanner } from "@/api/home/banner";
import { getCateGory } from "../../../api/home/cate";
import myShopCar from "@/components/communal/myShopCar.vue";
import myInput from "@/components/communal/myInput.vue";
import Carousel from "@/components/communal/swiper/index";
import CarItem from "@/components/communal/swiper/item";

export default {
  props: {
    left: {
      type: Boolean,
      default: false,
    },
  },
  name: "myBanner",
  setup(props, ctx) {
    /* 定义仓库 */
    const store = useStore();
    /* 定义路由传参 */
    const router = useRouter();
    /* 定义路由收参 */
    const route = useRoute();
    /* 定义总数据存放地址 */
    /* 获取轮播图数据 */
    getBanner().then((res) => {
      // console.log(res);
      data.banner = res.result;
    });

    /* 获取左侧分类数据 */
    getCateGory().then((res) => {
      // console.log(res);
      data.cateData = res.result;
    });
    // 分类滑过出现弹层
    const cateHandle = (item) => {
      data.flag = true;
      data.title = item.name;
      data.listData = computed(() => {
        return item.goods;
      });
    };
    const data = reactive({
      banner: [],
      cateData: [],
      listData: [],
      flag: false,
      title: "",
      val: "",
    });
    const swiper = reactive({
      imgCurrentIndex: 0,
      time: null,
      hasDirector: false,
      autopaly: () => {
        swiper.time = setInterval(() => {
          swiper.imgCurrentIndex += 1;
          if (swiper.imgCurrentIndex >= data.banner.length) {
            swiper.imgCurrentIndex = 0;
          }
        }, 3000);
      },
      currentIndexHandle: (i) => {
        swiper.imgCurrentIndex += i;
        if (swiper.imgCurrentIndex === data.banner.length) {
          swiper.imgCurrentIndex = 0;
        }
        if (swiper.imgCurrentIndex === -1) {
          swiper.imgCurrentIndex = data.banner.length - 1;
        }
      },
      mouseenterChange: (bool) => {
        if (bool) {
          clearInterval(swiper.time);
          swiper.time = null;
        } else {
          swiper.autopaly();
        }
        swiper.hasDirector = bool;
      },
    });
    onMounted(() => {
      // swiper.autopaly();
    });
    return { ...toRefs(data), ...toRefs(swiper), cateHandle };
  },
  components: {
    myShopCar,
    myInput,
    Carousel,
    CarItem,
  },
};
</script>
<style lang="scss" scoped>
/* 如果不想样式污染  就加个scoped */
.myBanner {
  width: 100%;
  height: 500px;
  margin: 0 auto;
  position: relative;
  background-color: #f5f5f5;
  .myBanners {
    width: 1240px;
    height: 500px;
    margin: 0 auto;
    position: relative;
  }
  .swiper {
    width: 100%;
    height: 100%;
    position: relative;
    cursor: pointer;
    img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
    span {
      z-index: 9;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      z-index: 99999;
      font-size: 20px;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background-color: #aaa;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      color: #fff;
      &.left {
        left: 270px;
      }
      &.right {
        right: 20px;
      }
    }
    .ul {
      position: absolute;
      bottom: 30px;
      left: 60%;
      display: flex;
      transform: translateX(-50%);
      li {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background-color: rgba(0, 0, 0, 0.507);
        margin-left: 12px;
        cursor: pointer;
        transition: all 0.3s;
        &.active {
          background-color: #fff;
        }
        &:hover {
          background-color: var(--color);
          transform: scale(1.5);
        }
      }
    }
  }
  .gul {
    position: absolute;
    top: 0;
    left: 0;
    width: 250px;
    height: 500px;
    li {
      color: #fff;
      line-height: calc(500px / 9);
      background-color: rgba(0, 0, 0, 0.623);
      padding-left: 40px;
      font-size: 14px;
      cursor: pointer;
      &:hover {
        background-color: var(--color);
      }
    }
  }
  .listContent {
    position: absolute;
    top: 0;
    left: 250px;
    width: calc(1240px - 250px);
    height: 100%;
    background-color: rgba(255, 255, 255, 0.541);
    padding: 20px 20px;
    .title {
      font-size: 22px;
    }
    .goods_content {
      display: flex;
      flex-wrap: wrap;

      justify-content: space-between;
      align-items: flex-start;
      .goods_item {
        border-radius: 10px;
        overflow: hidden;
        height: 120px;
        width: 32.5%;
        margin-bottom: 20px;
        color: #666;
        position: relative;
        background-color: #fff;
        &:hover {
          background-color: #e3f9f4;
        }
      }
    }
  }
}

.opcatiy-enter-active,
.opcatiy-leave-active {
  transition: opacity 0.3s linear;
}
/* 定义进入过渡生效时的状态 */
.opcatiy-enter-active {
  opacity: 0;
}
/* 定义进入过渡的结束状态 */
.opcatiy-enter-to {
  opacity: 1;
}
/* 定义离开过渡的开始状态 */
.opcatiy-leave-active {
  opacity: 1;
}
/* 定义离开过渡的结束状态 */
.opcatiy-leave-to {
  opacity: 0;
}
</style>